function easeInSine(x) {
  return 1 - Math.cos((x * Math.PI) / 2)
}
function easeInOutQuint(x) {
  return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2
}

const box1 = document.querySelector('.box1')
const box2 = document.querySelector('.box2')

function rqf(fn) {
  requestAnimationFrame((m) => {
    const done = fn(m)
    if (done) return
    rqf(fn)
  })
}

function animationHandle(start, end, time, animaFn, callBack) {
  if (start === end) return
  const isUp = start < end
  let distance = end - start
  rqf((m) => {
    let v = start + animaFn(m / time) * distance
    if (isUp) {
      if (v >= end) {
        v = end
      }
    } else {
      if (v <= end) {
        v = end
      }
    }
    callBack(v)
    return v == end
  })
}

animationHandle(0, 1000, 2000, easeInSine, (v) => {
  box1.style.left = v + 'px'
})
animationHandle(1000, 0, 2000, easeInOutQuint, (v) => {
  box2.style.left = v + 'px'
})
